<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Example</title>
</head>
<body>
    <h1>WebSocket Example</h1>
    <textarea id="messageInput" placeholder="Type your message..."></textarea>
    <input type="text" id="messageTypeInput" placeholder="Type message type...">
    <button onclick="sendMessage()">Send</button>

    <script>
        // 创建 WebSocket 连接
        const socket = new WebSocket("ws://localhost:8080/ws?"+"usertoken=123");

        // 监听连接成功事件
        socket.addEventListener("open", () => {
            console.log("WebSocket connected");
        });

        // 监听收到消息事件
        socket.addEventListener("message", event => {
            console.log("Received message:", event.data);
        });

        // 发送消息
        function sendMessage() {
            const messageInput = document.getElementById("messageInput");
            const messageTypeInput = document.getElementById("messageTypeInput");
            const message = messageInput.value;
            const messageType = messageTypeInput.value;
            const payload = {
                message: message,
                messageType: messageType
            };
            socket.send(JSON.stringify(payload));
            messageInput.value = "";
            messageTypeInput.value = "";
        }
    </script>
</body>
</html>
